<!--
	通知列表组件
	作用：
		支持任意类型的通知列表显示
	
	属性：
	   1、messages : 传入所有消息对象
	   2、handleNoticeInfo ：处理通知内容的方法，需要父组件传入
-->

<template>
	<view class="container" >
		<view class="tui-cmtbox">
			<view class="tui-cmt-cell" v-for="(item, index) in notices" :key="index">
				<image :src="item.user.avatar" class="tui-avatar"></image>
				<view class="tui-cmt-detail">
					<view class="tui-header-box">
						<view class="tui-cmt-nickname" v-html="item.title"></view>
					</view>
					<view class="tui-cmt-content" v-if="!isEmpty(item.content)" v-html="item.content"></view>
					<view class="tui-reply-box" v-if="!isEmpty(item.entity)">
						<tui-list-cell backgroundColor="#f2f2f2" :size="28" @tap="cmtReply">
							<view class="tui-flex-1 tui-reply-nickname">{{item.entity.nickname}}</view>
							<view class="tui-flex-1" v-html="item.entity.content"></view>
							<slot name="inside-entity-slot"></slot>
						</tui-list-cell>
					</view>
					<view class="tui-footer">
						{{item.createTime}}
					</view>
					<slot name="bottom-slot"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import relativeTimeGetter from "@/utils/RelativeTimeGetter.js"
import textMap from "@/utils/TextMap.js"
import c from "@/utils/Constant.js"
import textUtils from "@/utils/TextUtils.js"
import userApi from "@/request/api/userApi.js"
import listUtils from "@/utils/ListUtils.js"
export default {
	data() {
		return {
			notices:[
			],
			userInfos:[  //多个用户的基础信息
				
			]
		}
	},
	props:{
		messages:{
			type:Array,
			default:null
		},
		handleNoticeInfo: { //处理通知的方法，需要父组件传入
			type: Function,
			default: null
		}
	},
	created(){
	},
	watch:{
		messages(newMessages){
			this.asyncExecute()
		}
	},
	computed: {
		
	},
	methods: {
		//所有消息格式化为通知对象
		formatMessageToNoticesAll(){
			this.notices = [];//清空原通知对象数组
			this.messages.forEach((item)=>{
				let notice = this.formatMessageToNotices(item)
				this.notices.push(notice)
			})
		},
		//单个消息格式化为通知对象
		formatMessageToNotices(message){
			let trigger = listUtils.findElem(this.userInfos,"id",message.senderId);
			if(message.senderId == 1){
				trigger = {avatar:"/static/images/message/system.png",nickname:"系统通知"}
			}
			console.log(trigger)
			let notice = this.handleNoticeInfo(message,trigger);
			
			notice.user = {avatar:trigger.avatar,nickname:trigger.nickname};
			notice.createTime = relativeTimeGetter.getText(message.createTime)
			return notice;
		},
		isEmpty(text){
			return text == null || text == '';
		},
		cmtReply: function() {
			uni.navigateTo({
				url: '../commentReply/commentReply'
			})
		},
		
		async asyncExecute(){
			//查询消息里的所有发送者（也就是通知的触发者）
			let ids = this.messages.map((message)=>{
				return message.senderId;
			})
			let data = await userApi.batchUserBaseInfo(listUtils.removeRepeat(ids))
			if(data.code == 0 && data.data){
				this.userInfos = [...this.userInfos,...data.data]
			}
			//将消息对象格式化为通知		
			this.formatMessageToNoticesAll();
		},
		
		
		//给子组件传入message数组的方法
		init(data){
			this.messages = data
		}
	}
}
</script>

<style>
page {
	background: #fff;
	color: #333;
}

.container {
	padding: 40rpx 30rpx 110rpx 30rpx;
	box-sizing: border-box;
}
.tui-cmtbox {
	padding-bottom: 20rpx;
}

.tui-cmt-cell {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-top: 44rpx;
}

.tui-avatar {
	width: 64rpx;
	height: 64rpx;
	border-radius: 32rpx;
	display: block;
	flex-shrink: 0;
}

.tui-cmt-detail {
	width: 100%;
	padding-left: 16rpx;
	box-sizing: border-box;
}

.tui-header-box {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	font-size: 30rpx;
}

.tui-cmt-nickname {
	color: #000000;
}

.tui-cmt-content {
	font-size: 32rpx;
	color: #333;
	text-align: justify;
	padding-top: 8rpx;
	word-break: break-all;
	word-wrap: break-word;
}

.tui-reply-box {
	border-radius: 8rpx;
	overflow: hidden;
	margin-top: 16rpx;
}

.tui-cell-last {
	display: flex;
	align-items: center;
	word-wrap: break-word;
	color: #5677fc;
}
.tui-flex-1 {
	flex: 1;
	width: 100%;
}

.tui-reply-nickname {
	font-size: 24rpx;
	color: #7a7a7a;
	padding-bottom: 8rpx;
}

.tui-footer {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	margin-top: 16rpx;
	color: #9a9a9a;
}
.tui-safearea-bottom {
	width: 100%;
	height: env(safe-area-inset-bottom);
}
</style>

